<template>
    <div id="app">
        <!-- 修改会员设置模板 -->
        <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp">
            <changeInit v-show="changeInitNum" @close="getInitNum"></changeInit>
        </transition>
        <!-- 查询余额记录模板 -->
        <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp">
            <getMoneyLog  v-show="getMoneyInitNum"  @close="getMoneyInit"></getMoneyLog>
        </transition>
        <!-- 查询游戏记录模板 -->
        <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp">
            <getGameLog  v-show="getGmaeInitNum"  @close="getGmaeInit"></getGameLog>
        </transition>
        <!-- 顶部 -->
        <div id="header">
            <!-- 顶部功能 --> 
            <div class="center">
                <!-- 左边公告 -->
                <div class="TopLeft">
                    <div class="icons">
                        <div></div>
                        <p>公告：</p>
                    </div>
                    <!-- 公告列表 -->
                    <ul >
                        <li>{{Hall.Notice}}</li>
                    </ul>
                </div>
                <!-- 右边游戏 -->
                
                <div class="TopRight">
                    <li v-if="$route.params.m=='3'" v-for="(Monry,mk) in moneyTable" :style="'background:url(./static/img/'+Monry+'.png);background-size:100% 100%;'" class="cm" :class="{'CkCm':Monry==thisMonry}" @click="changeMoney(Monry)" :key="mk"></li>
                    <li v-if="$route.params.m!='3'">
                    <a href="javascript:;" class="no"><li style="color: #ccc"><div class="user"></div>会员中心：{{Init.UId}}</li></a>
                    <a href="javascript:;"  @click="getGmaeInit"><li ><div class="game"></div>游戏记录</li></a>
                    <a href="javascript:;"  @click="getMoneyInit"><li ><div class="money"></div>余额记录</li></a>
                    <a href="javascript:;"  @click="getInitNum"><li ><div class="password"></div>账户设置</li></a>
                    <a href="./dirHtml/gameRule.html" target="_black"><li ><div class="gameRule"></div>游戏规则</li></a>
                    <li>
                        <a href="" class="opneView" @click.prevent="F11"><div></div></a>
                        <a  class="Chinas"><div></div></a>
                        <a  class="HongKong"><div></div></a>
                        <a  class="USA"><div></div></a>
                        <a href="javascript:;" @click="outGame" class="OFF"><div></div></a>
                    </li>
                </div>
            </div>
            <!-- 渐变线条 -->
            <div class="border"></div>
        </div>

        <!-- 内容 -->
        <div id="disCenter">
            <!-- 左边信息栏 -->
            <div id="funTable">
                        <!-- 简要信息 -->
                        <div class="BrieflyTable">
                            <!-- logo -->
                            <div class="logo">
                                <canvas class="rayBox" id="canvas" width="75px" height="75px" v-logo></canvas>
                            </div>
                            <div class="logoBorder"></div>
                            <!-- 余额 -->
                            <div class="wallet">
                                <div></div>
                                <span>余额</span>
                            </div>
                            <p>{{Init.UserCentent.Balance}}</p>
                        </div>
                        <!-- DV厅列表 -->
                        <div class="DVtable">
                            <!-- DV厅选项 -->
                            <dv :rest="dv"  :uid="k" v-for="(dv,k) in DVTable"  :key="k"></dv>
                        </div>
                        <!-- 二维码打开选项 -->
                        <img src="../assets/img/Phone.jpg" @click="openEwm">
                </div>
                <!-- 右边游戏场 -->
                <div id="gameRight" :style="$route.params.m=='duotai'?'overflow:hidden':''">
                    <vx  v-for="(vi,ks) in $route.params.m!='3'?Hall.RoomArray:0 " class="vivwBox" ref="vx" @postMessage="postMessage" :key="ks" :keys="ks"></vx>
                    <More v-for="(mores,mkk) in $route.params.m=='3'?CkMony:0" :M.sync="thisMonry"  ref="vx"  @postMessage="postMessage" :key="mkk" :keyid="mkk" ></More>
                </div>
                <!-- 换桌列表 -->
                <tabs v-if="$route.params.m=='3'" ></tabs>
            </div>
        <!-- 下载二维码 -->
        <transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
                <div id="ewmDowm" v-show="ewm">
                    <div class="top">
                        <h3>开通手机客户端</h3>
                        <a href="https://fir.im/support/articles/faq/ios9_certificate" target="_balck">安装指南</a>
                        <p @click="openEwm"></p>
                    </div>
                    <div class="center">
                        <div class="android">
                            <img src="../assets/img/QR_a.png">
                            <div class="div"><span></span><h6>Android</h6></div>
                        </div>
                        <div class="iPhone">
                            <img src="../assets/img/QR_i.png">
                            <div class="div"><span></span><h6>IOS</h6></div>
                        </div>
                    </div>
                </div>
        </transition>
    </div>	
</template>
<script>
import dv from "@/components/dv.vue"
import vx from "@/components/vx.vue"
import More from "@/components/More.vue"
import tabs from "@/components/tabs.vue"
import changeInit from "@/components/changeInit.vue"
import getMoneyLog from "@/components/getMoneyLog.vue"
import getGameLog from  "@/components/getGameLog.vue"


export default {
    name:"tables",
    template: '#gameTbale',
  	data(){
		return{
		loginNumber:0,
			DVTable:[
				{tatel:"DV一厅",table:[{src:{HallNumber:"1",GT:"1"},tatel:"百家乐"},{src:{HallNumber:"1",GT:"2"},tatel:"龙虎"},]},
				{tatel:"DV二厅",table:[{src:{HallNumber:"2",GT:"1"},tatel:"百家乐"},{src:{HallNumber:"2",GT:"1"},tatel:"龙虎"},]},
				{tatel:"更多玩法",table:[{src:{HallNumber:"3",GT:"30"},tatel:"多台"},{src:{HallNumber:"4",GT:"30"},tatel:"互动百家乐"}]}				
			],
			ewm:false,
				// 筹码列表数据
			moneyTable:['5','10','20','50','100','200','500','1000','5000','10000','50000'],
			// 当前多台下注筹码
			thisMonry:"5",
			// 打开会员设置
			changeInitNum:false,
			// 余额记录查询
			getMoneyInitNum:false,
			// 游戏记录查询
			getGmaeInitNum:false,
			//加载中控制数据
			loadging:false,
			workerObj:null
		}
	},
	computed:{
		Init(){
			return this.$store.getters.Init;
		},
		Hall(){
			return this.$store.getters.Hall;
		},
		// 多台数据
		CkMony(){
			return this.$store.getters.ManyGame.length;
		}
	},
	watch:{
		"Init.UId":function(newVal,oldVal){
			if(newVal!=''){
				window.userSocket.uSend('{"ActType":3,"ConnectionId":"","Content":{"HallNumber": 1},"ErrorCode":10000,"RandCode":"' + RandCode + '","UId":"' + UserId + '","GT": 1 }')
			}
		}
	},
	// 启动logo光度动画
	directives:{
		logo:{
			bind(el){
				var canvas=el.getContext("2d");
				var img=new Image();
				img.src="";
				img.onload=function(){
					canvas.drawImage(img,-90,0);
					var xx=0;
					setInterval(function(){
						if(xx>90){
							xx=-90
						}else{
						xx++;  
						}
						canvas.clearRect(0,0,140,140);
						canvas.drawImage(img,xx,0);
					},10)
				}
			}
		}
	},
  components: {
  	dv,
	vx,
	More,
	tabs,
	changeInit,
	getGameLog,
	getMoneyLog
  },
  methods:{
  	openEwm(){
  		this.ewm=!this.ewm;
  	},
  	F11(){
  			var el=document.documentElement;
  			var isFullscreen=document.fullScreen||document.mozFullScreen||document.webkitIsFullScreen;
			if(!isFullscreen){//进入全屏,多重短路表达式
			(el.requestFullscreen&&el.requestFullscreen())||
			(el.mozRequestFullScreen&&el.mozRequestFullScreen())||
			(el.webkitRequestFullscreen&&el.webkitRequestFullscreen())||(el.msRequestFullscreen&&el.msRequestFullscreen());
			var height=window.screen.height;
  			this.height=height-70+'px';
			}else{	//退出全屏,三目运算符
			document.exitFullscreen?document.exitFullscreen():
			document.mozCancelFullScreen?document.mozCancelFullScreen():
			document.webkitExitFullscreen?document.webkitExitFullscreen():'';
			document.msExitFullscreen?document.msExitFullscreen():'';
			var height=document.documentElement.scrollHeight;
			}
	  },
	// 多台选择筹码
	changeMoney(x){
		window.AudioObj.Play(["tab"])
		this.thisMonry=x;
	},
	// 打开关闭会员设置
	getInitNum(){
		if(this.changeInitNum){
			this.changeInitNum=false;
		}else{
			this.changeInitNum=true;
			this.$store.dispatch("User/getUser");
		}
	},
	// 打开关闭游戏记录查询
	getGmaeInit(){
		if(this.getGmaeInitNum){
			this.getGmaeInitNum=false;
		}else{
			this.getGmaeInitNum=true;
			this.$store.dispatch("log/getGameLog",{});
		}
	},
	// 打开关闭余额记录
	getMoneyInit(){
		if(this.getMoneyInitNum){
			this.getMoneyInitNum=false;
		}else{
			this.getMoneyInitNum=true;
			this.$store.dispatch("log/getMoneyLog",{});
		}
	},
	// 退出游戏
	outGame(){
		if(confirm("确定退出登陆吗？")){
			window.userSocket.uSend(JSON.stringify({ActType:12,UId:UserId,RandCode}));
			// let zh = sessionStorage.getItem("UserId");
			window.userSocket.allStop();
			sessionStorage.clear();
			window.location.href="./index.html";	
			// window.location.href="./index.html?"+zh+"&123456";	
		}
	},
	postMessage(msg){
		console.log("post")
		console.log(msg)
		if(this.workerObj){
			this.workerObj.postMessage(msg);
		}else{
			let a=setInterval(()=>{
				if(this.workerObj){
					this.workerObj.postMessage(msg);
				}
				clearInterval(a);
			},500)
		}
	},
  },
  mounted(){
	this.workerObj=new Worker("../assets/js/ludan.js");
	this.workerObj.onmessage=(data)=>{
		let msg=data.data;
		
		this.$refs.vx[msg.room].$refs.luandSon.setLudan(msg);
	}
  },
	beforeDestroy(){
		this.workerObj.terminate();
	}
}
</script>
